---
title: 禅モード
icon: Fullscreen
---

<MetaData
  lang="ja-JP"
  meta={{
    plugins: [{
      client: '@univerjs/sheets-zen-editor',
      facade: '@univerjs/sheets-zen-editor/facade',
      locale: '@univerjs/sheets-zen-editor/locale/en-US',
      style: '@univerjs/sheets-zen-editor/lib/index.css',
    }],
    server: 'No',
  }}
/>

禅モードは、クリーンなインターフェースでセル内容の編集に集中できるようにする機能です。現在アクティブなセル内容を編集するための全画面エディターを提供し、周辺の視覚的ノイズを最小化することで編集体験を向上させます。

## プリセットモード

禅モード自体はプリセットモードを提供しませんが、プラグインとして他のプリセット構成に組み合わせて利用できます。

### インストール

```package-install
npm install @univerjs/sheets-zen-editor
```

### 使い方

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsZenEditorPlugin } from '@univerjs/sheets-zen-editor'
import SheetsZenEditorEnUS from '@univerjs/sheets-zen-editor/locale/en-US' // [!code ++]

import '@univerjs/sheets-zen-editor/facade' // [!code ++]

import '@univerjs/sheets-zen-editor/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      SheetsZenEditorEnUS, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    UniverSheetsZenEditorPlugin, // [!code ++]
  ],
})
```

## プラグインモード

### インストール

```package-install
npm install @univerjs/sheets-zen-editor
```

### 使い方

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsZenEditorPlugin } from '@univerjs/sheets-zen-editor' // [!code ++]
import SheetsZenEditorEnUS from '@univerjs/sheets-zen-editor/locale/en-US' // [!code ++]

import '@univerjs/sheets-zen-editor/lib/index.css' // [!code ++]

import '@univerjs/sheets-zen-editor/facade' // [!code ++]

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      SheetsZenEditorEnUS, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverSheetsZenEditorPlugin) // [!code ++]
```

## Facade API

Facade API の完全な型定義は [FacadeAPI](https://reference.univer.ai/en-US) を参照してください。

### 禅モードへ入る

`FWorkbook.startZenEditingAsync()` を使用して禅モードに入ります。これにより現在アクティブなセル内容を編集するための全画面エディターが開きます。

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const success = await fWorkbook.startZenEditingAsync()
```

### 禅モードを終了する

`FWorkbook.endZenEditingAsync(save)` を使用して 禅モードを終了し、全画面エディターを閉じます。`save` が `true` の場合、エディターで行った変更内容が保存されます。

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const success = await fWorkbook.endZenEditingAsync(true)
```

### イベントリスナー

禅モードは [セル編集イベント](http://localhost:3000/en-US/guides/sheets/features/core/range-selection#%E5%BC%80%E5%A7%8B%E7%BC%96%E8%BE%91%E4%BA%8B%E4%BB%B6) を利用してエディター内での状態変化を監視できます。

- `univerAPI.Event.BeforeSheetEditStart`: 禅モードへ入る直前
- `univerAPI.Event.SheetEditStarted`: 禅モードへ入った直後
- `univerAPI.Event.BeforeSheetEditEnd`: 禅モードを終了する直前
- `univerAPI.Event.SheetEditEnded`: 禅モードを終了した直後
